<template>
  <div class="bg">
    <NewHomeHeader/>
    <div class="img_bg">
      <img class="bg" src="https://image.utea88.com/statics/pc_zoujin_bg_01.png" alt="">
      <img class="title_img" src="https://image.utea88.com/statics/pc_zoujin_item_01.png" alt="">
    </div>
    <div class="first_section">
      <div class="main_bg">
        <div class="first_img_bg">
          <img src="https://image.utea88.com/statics/pc_zoujin_item_06.png" alt="">
        </div>
        <div class="text_section">
          <div class="left_bg">
            <video class="video" src="https://image.utea88.com/exhibit/xsz.mp4" controls="controls" autoplay playsinline></video>
          </div>
          <div class="right_bg">
            <span class="text">
              {{ text1 }}
              <span style="color: rgba(15, 132, 193, 1);">{{ text2 }}</span>
              <span>{{ text3 }}</span>
            </span>
          </div>
        </div>
        <div class="second_img_bg">
          <img src="https://image.utea88.com/statics/pc_zoujin_item_07.png" alt="">
        </div>
      </div>
    </div>
    <div class="second_section">
      <img src="https://image.utea88.com/statics/pc_zoujin_item_02.png" alt="">
    </div>
    <div class="third_section">
      <img class="bg" src="https://image.utea88.com/statics/pc_zoujin_bg_02.png" alt="">
      <img class="title_img" src="https://image.utea88.com/statics/pc_zoujin_item_03.png" alt="">
    </div>
    <div class="four_section">
      <img class="title_img" src="https://image.utea88.com/statics/pc_zoujin_item_04.png?t=1" alt="">
    </div>
    <div class="five_section">
      <img class="title_img" src="https://image.utea88.com/statics/pc_zoujin_item_05.png" alt="">
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  import NewHomeHeader from "./components/NewHomeHeader.vue"
  import Footer from "@/views/front/components/Footer";

	export default {
    name: 'ZouJin',
		components: {
			NewHomeHeader,
      Footer
		},
		data() {
			return {
        text1: '众茶国际是茶产业生态赋能者、是茶界领先的茶产业数字化供应链平台，创立于2019年，以S2B（b）2C（C）商业模式为中国164万家茶商茶企、亿万茶友提供直接或间接赋能服务。\n众茶国际秉持“与茶商茶企共成长”的使命与愿景，奉行“共创共赢共享”的价值观，已经发展',
        text2: '众茶通、众茶仓、众茶会',
        text3: '三大业务板块，建设贯穿茶叶种植、采摘、制作、藏养、仓储物流、营销及茶文化全产业链的数字化服务平台，众茶国际将坚持创新突破，沿着茶商茶企需求顺势而为，与百万家茶商茶企共享茶产业互联网、数字化带来的红利。'
      }
		},
		methods: {
			
  	},
    mounted(){
             
    },
    created() {
      
    },
	}
</script>

<style scoped lang="scss">
  .bg {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .img_bg {
    position: relative;
    width: 100%;
    height: 600px;

    .bg {
      width: 100%;
      height: 100%;
    }

    .title_img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 462px;
      height: 177px;
    }
  }

  .first_section {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;

    .main_bg {
      position: relative;
      margin-top: 60px;
      margin-bottom: 60px;
      width: 1040px;

      .first_img_bg {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;

        img {
          width: 283px;
          height: 69px;
        }
      }

      .text_section {
        position: relative;
        margin-top: 11px;
        width: 1040px;
        height: 300px;
        display: flex;

        .left_bg {
          position: relative;
          width: 450px;
          height: 100%;
          background: rgb(242, 242, 242);

          .video {
            width: 100%;
            height: 100%;
          }
        }

        .right_bg {
          width: 590px;
          height: 100%;
          padding: 33px 30px;
          background: rgb(242, 242, 242);

          .text {
            opacity: 1;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 28px;
            color: rgba(0, 0, 0, 1);
            text-align: justify;
            vertical-align: top;
            white-space: pre-wrap;
          }
        }
      }

      .second_img_bg {
        position: relative;
        margin-top: 40px;
        width: 1040px;
        height: 330px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .second_section {
    position: relative;
    width: 100%;
    height: 770px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(240, 240, 240);

    img {
      width: 1008px;
      height: 650px;
    }
  }

  .third_section {
    position: relative;
    width: 100%;
    height: 914px;

    .bg {
      width: 100%;
      height: 100%;
    }

    .title_img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 940px;
      height: 784px;
    }
  }

  .four_section {
    position: relative;
    width: 100%;
    height: 540px;

    .title_img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1120px;
      height: 410px;
    }
  }

  .five_section {
    position: relative;
    width: 100%;
    height: 1002px;

    .title_img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1120px;
      height: 872px;
    }
  }
</style>

